<template>
	<view>
		<view class="seach_view">
			<view class="seach_view_border flex">
				<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/seach_icon.png" class="seach_view_border_icon" mode=""></image>
				<input type="text" placeholder="请输入科室或医生" class="seach_view_border_input" v-model="keyword" placeholder-style="color: #999999;" />
				<view @click="go_docror(keyword)" class="seach_view_border_right">
					搜索
				</view>
			</view>
		</view>
		<view class="content">
			<scroll-view scroll-y="true" class="content_left" :style="{height:scrollH+'px'}">
				<view :class="['content_left_list_item',tap_index == index?'actvie':(tap_index-1 !=-1)&&(tap_index-1) == index?'choose_top':(tap_index+1)&&(tap_index+1) == index?'choose_bottom':'']" 
				v-for="(item, index) in list" @click="choose_tap(index, item.sub)">
					{{ item.name }}
				</view>
			</scroll-view>
			<scroll-view scroll-y="true" class="content_right" :style="{height:scrollH+'px'}">
				<view class="content_right_list_item"  v-for="(item, index) in list2" @click="go_docror(item.name)">
					{{ item.name }}
				</view>
				<view v-if="list2.length == 0">
					<u-empty mode="list"></u-empty>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { department } from '../../api/common.js';
	import { doctor } from '../../api/login.js';
	import getScrollHeight from "@/utils/utils.js"
export default {
	data() {
		return {
			keyword: '',
			scrollH:'',
			lableH1:'',
			scrollHlist:'',
			label_show:false,
			label_show1:false,
			list: [{
				id: 0,
				name: "不限",
				sub:[]
			}],
			list2: [],
			tap_index:0,
		};
	},
	watch:{
		
	},
	onReady() {
		let t = this
		getScrollHeight.getScrollHeight('content_left').then(res=>{
			t.scrollH = res - 10
		})	
	},
	onLoad() {
		this.getList();
	},
	onShow() {
		
	},
	methods: {
		getList(){
			department().then(res=>{
				if(res.code == 200001){
					this.list.push(...res.data);
					for(let i=0;i<res.data.length;i++){
						console.log(res.data[i])
						let arr = res.data[i].sub?res.data[i].sub:[];
						this.list[0].sub.push(...arr);
					}
					this.list2 = this.list[0].sub;
				}
			})
		},
		// getDoctor(name){
		// 	let params = {
		// 		name: name,
		// 		size: 10
		// 	}
		// 	doctor(params).then(res=>{
		// 		if(res.code == 200001){
		// 			this.list2 = res.data.data;
		// 		}
		// 	})
		// },
		choose_tap(index, data){
			this.tap_index = index
			this.list2 = data;
			this.$forceUpdate();
			// this.getDoctor(data);
		},
		yc_label(){
			this.label_show = false
		},
		show_label(){
			console.log('---')
			this.label_show = true
		},
		go_detail(){
			uni.navigateTo({
				url:'/subPages/ShopingDetail/ShopingDetail'
			})
		},
		go_docror(name){
			uni.navigateTo({
				url:'/pages/FindAnAxpert/FindAnAxpertDoctor/FindAnAxpertDoctor?name=' + name
			})
		}
	}
};
</script>

<style>
.zhanwei {
	width: 100%;
	height: 106rpx;
	background-color: #F4F7FF;
}
.seach_view {
	height: 88rpx;
	padding: 0 30rpx;
	box-sizing: border-box;
	background: #F4F7FF;
	display: flex;
	align-items: center;
}
.seach_view_border {
	width: 100%;
	height: 64rpx;
	border-radius: 32rpx;
	border: 1rpx solid rgba(255, 255, 255, 0.5);
	padding: 0 30rpx;
	box-sizing: border-box;
	background: #fff;
}
.seach_view_border_icon {
	width: 44rpx;
	height: 44rpx;
}
.seach_view_border_input {
	width: calc(100% - 183rpx);
	color: #333;
	font-family: Alibaba PuHuiTi 2;
	font-size: 26rpx;
	font-weight: 400;
}
.content {
	/* padding-top: 30rpx; */
	display: flex;
	justify-content: space-between;
	position: relative;
}
.content_left {
	width: 176rpx;
	border-radius: 0rpx 20rpx 0rpx 0rpx;
}
/* .content_left_list_item:first-child {
	border-top-right-radius: 20rpx;
} */
.content_left_list_item {
	width: 176rpx;
	height: 110rpx;
	text-align: center;
	line-height: 110rpx;
	background-color: #FAFBFF;
	color: #888;
	text-align: center;
	font-family: Alibaba PuHuiTi 2;
	font-size: 26rpx;
}
.actvie{
	background-color: #fff;
}
.choose_top{
	border-radius: 0rpx 0rpx 20rpx 0rpx;
}
.choose_bottom{
	border-radius: 0rpx 20rpx 0rpx 0rpx;
}
.content_right{
	width: 574rpx;
	padding: 0 40rpx;
	box-sizing: border-box;
}
.content_right_img{
	width:100%;
	height: 204rpx;
	border-radius: 30rpx;
}
.content_right_label{
	width: 100%;
	height: 58rpx;
	display: flex;
	align-items: center;
	margin-top: 30rpx;
}
.content_right_label_left{
	width:calc(100% - 68rpx);
	height: 58rpx;
	white-space: nowrap;
}
.content_right_label_right{
	width: 68rpx;
	height: 68rpx;
}
.content_right_label_right_img{
	width: 58rpx;
	height: 58rpx;
	display: block;
	margin: 0 auto;
	margin-top: 5rpx;
}
.content_right_label_left_item{
	color: #333;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 24rpx;
	font-weight: 400;
	display: inline-flex;
	padding: 12rpx 24rpx;
	border-radius: 94rpx;
	background: #F4F5F9;
	margin-right: 20rpx;
}
.content_right_label_left_item1{
	color: #333;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 24rpx;
	font-weight: 400;
	display: inline-flex;
	padding: 12rpx 24rpx;
	border-radius: 94rpx;
	background: #F4F5F9;
	margin-right: 20rpx;
	margin-top: 20rpx;
}
.content_label_tc{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
}
.content_label_tc_yinying{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	background: #333;
	opacity: 0.6;
	z-index: 9999;
}
.content_label_tc_view{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	background: #ffffff;
	z-index: 9999;
	padding: 30rpx;
	box-sizing: border-box;
	
}
.content_label_tc_view_icon{
	width: 100%;
	display: flex;
	flex-direction: row-reverse;
}
.content_label_tc_view_icon_icon{
	width: 58rpx;
	height: 58rpx;
}
.content_right_list{
	width: 100%;
	margin-top: 28rpx;
}
.list{
	display: grid;
	grid-template-columns: repeat(3, 150rpx);
	grid-gap: 30rpx 30rpx;
}
.content_right_list_view{
	width: 150rpx;
	height: 150rpx;
}
.content_right_list_view_img{
	width: 108rpx;
	height: 108rpx;
	display: block;
	margin: 0 auto;
	background-color: #888;
	border-radius: 16rpx;
}
.content_right_list_view_text{
	color: #666;
	text-align: center;
	font-family: Alibaba PuHuiTi;
	font-size: 24rpx;
	font-weight: 400;
	text-align: center;
	margin-top: 20rpx;
}
.seach_view_border_right{
	width: 108rpx;
	height: 24rpx;
	line-height: 24rpx;
	color: #0165FB;
	font-size: 26rpx;
	font-weight: 400;
	text-align: center;
	border-left: 1rpx solid #DFDFDF;
}
.content_right_list_item:first-child{
	margin-top: 36rpx;
}
.content_right_list_item{
	width: 100%;
	margin-top: 52rpx;
	font-size: 32rpx;
	color: #444;
}
</style>
